<template>
  <div>
    <div class="main">
      <div class="middle">
        <div class="button_row" style="margin: 1vh 2vh;text-align: right">
          <el-button type="primary"
                     size="small"
                     @click="register">
            注册新用户
          </el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="userList"
          border
          style="width: 100%;">
          <el-table-column prop="id" label="学号/工号" min-width="100">
          </el-table-column>
          <el-table-column prop="realName" label="真实姓名" min-width="150">
          </el-table-column>
          <el-table-column prop="collegeName" label="所属学院" min-width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button @click="alert(scope.$index, scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="alert(scope.$index, scope.row)" type="text" size="small">密码重置</el-button>
              <el-button @click="alert(scope.$index, scope.row)" type="text" size="small">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'user',
  data () {
    return {
      userList: [
        {
          id: 201727010309,
          realName: '林炜',
          collegeName: '数学与信息学院',
        },
        {
          id: 201727010310,
          realName: '马云',
          collegeName: '电子',
        },
      ],
      loading: true
    }
  },
  async mounted () {
    // 获取用户信息
    // let result = await banWordService.list('', -1, -1)
    // this.banWordList = result.data.data
    this.loading = false
  },
  methods: {
    register() {
      alert('注册')
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin clearFloat {
  // 清除浮动，防止content因为子元素float而塌陷，height=0
  content:"";
  clear:both;/*清除浮动*/
  display:block;/*确保该元素是一个块级元素*/
}
.main {
  .middle {
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
  }
  .contentManageDialog {
    .form {
      overflow: auto;
      .item {
        margin: 2vh auto;
        width: 90%;
      }
    }
  }
}
</style>
